<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="tabtop">
          <div v-for="(item, index) in contractTypelist" :key="index" @click="choose(item.id)">
            <div :class="currenindex == item.id ? 'active' : 'text'">{{ item.value }}</div>
            <div v-if="
                currenindex !== item.id &&
                currenindex !== index + 2 &&
                index !== 2
              " class="hr"></div>
          </div>
        </div>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <span v-show="!showCardNav">
              <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
            </span>
            <span v-show="showCardNav">
              <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
            </span>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">用户名称</span>
                <el-input v-model="tableParam.name" style="width: 220px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">电话</span>
                <el-input v-model="tableParam.phone" style="width: 220px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div>
              <!-- <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='JIFENDHBL'))!==-1" size="small" class="bottom_all" style="margin-left: 0" @click="">
                积分兑换比例
              </el-button> -->
            </div>
          </div>
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div v-if="item.label == '积分兑换比例'">
                      1
                    </div>
                    <div v-else-if="item.label == '积分明细'">
                      <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='JIFENMX'))!==-1" class="table_link" :underline="false" @click="look1Fun(scope.row)">积分明细</el-link>
                    </div>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="look1Type" width="850px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">积分明细</span>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData2" tooltip-effect="dark">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <template v-for="(item, index2) in table2">
            <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look1Type =false ">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage,
} from "@/api/smart/smartIntegral/smartIntegralUser.js";
export default {
  mixins: [mixin],
  data() {
    return {
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      contractTypelist: [
        { value: "员工积分", id: 1 },
        { value: "客户积分", id: 2 },
        { value: "供应商积分", id: 3 },
      ],
      currenindex: 1,
      table: [
        { label: "用户名称", width: "auto", prop: "name", status: true },
        { label: "组织", width: "auto", prop: "organizationInfo", status: true },
        { label: "岗位", width: "auto", prop: "stationName", status: true },
        { label: "电话", width: "auto", prop: "phoneNum", status: true },
        { label: "积分", width: "auto", prop: "integral", status: true },
        { label: "积分兑换比例", width: "auto", prop: "", status: true },
        { label: "兑换积分值", width: "auto", prop: "integral", status: true },
        { label: "积分明细", width: "auto", prop: "", status: true },
      ],
      table2: [
        { label: "用户名称", width: "auto", prop: "name", status: true },
        { label: "积分业务", width: "auto", prop: "integralBusiness", status: true },
        { label: "兑换商品", width: "auto", prop: "exchangeGoods", status: true },
        { label: "积分变更", width: "auto", prop: "integral", status: true },
        { label: "时间", width: "160", prop: "createTime", status: true },
      ],
      fromDate: {},
      addDialog: false,
      look1Type: false,
      urlList: [],
      srcList: [],
    };
  },
  created() {
    this.init();
    this.tableParam.type = 1;
  },
  methods: {
    look1Fun(e) {
      this.look1Type = true;
      this.tableData2 = []
      this.tableData2 = e.userIntegralChangeInfo
    },
    init() {
      /*重置数据*/
      this.$data.tableParam = this.$options.data().tableParam;
      this.gettableData();
    },
    choose(num) {
      this.currenindex = num;
      this.tableParam.name = ''
      this.tableParam.phone = ''
      this.tableData = []
      this.tableParam.type = this.currenindex;
      this.gettableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-title {
  font-size: 16px;
  font-weight: bold;
  padding-right: 40px;
}
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
.tabtop {
  width: 566px;
}
</style>
